<template>
	<div class="navbar">
		<div class="nav_item" v-for='(route,index) in routeList.children' @click="fn.handleChangeMenu(route,index)">
			<i class="fa fa-map-marker"></i>
		</div>

	</div>
</template>

<script>
import { useRouter } from 'vue-router'
// import routeList from '@/router/route'
import route from '@/router/route'
import { ref } from 'vue'
export default {
	name: 'NavBar.vue',

	setup(){
		const routeList = ref([])
		routeList.value = route[2]
		console.log('routeList',routeList)
		const router  = useRouter()
		const fn = {
			handleChangeMenu(route,index){

				debugger
				router.push(route.path)
			},
		}

		return{
			fn,
			routeList
		}
	}
}
</script>

<style lang='scss' scoped>
@import "src/assets/scss/main.scss";
.navbar {
	background-color: blueviolet;
	width: 60px;
	bottom: 0;
	height: calc(100% - #{$bannerHeight});
	flex-direction: column;
	justify-content: flex-start;
	padding-top: 5px;
	background-color: #061A24;
	.nav_item {
		//background-color: transparentize(#fff,0.3);
		color: #61BFCE;
		background-color: rgba(97, 191, 206, 0.2);
		cursor: pointer;
		height: 45px;
		width: 45px;
		margin: 5px;
		display: flex;
		@include border-radius-mini;
		@include button-hover(#007596);
		justify-content: center;
		align-items: center;

	}
}
</style>
